<template>
  <div class="tagTag">
    <a-tag class="lockTag" v-if="config.lockFlag" @click.stop="clickTag('lockFlag')">{{ $t('occupy') }}</a-tag>
<!--    <a-tag-->
<!--      class="riskTag"-->
<!--      v-if="config.compatibleRisk"-->
<!--      @click.stop="clickTag('compatibleRisk')">-->
<!--      {{ $t('risk') }}-->
<!--    </a-tag>-->
    <a-tag class="jumpTag" v-if="config.taskJump" @click.stop="clickTag('taskJump')">{{ $t('queueJump') }}</a-tag>
    <lock-risk-jump-dialog ref="lockRiskJumpDialogRef" :query="config.query"></lock-risk-jump-dialog>
  </div>
</template>
<script>
import LockRiskJumpDialog from '@/views/components/LockRiskJump/dialog.vue'
export default {
  components: {
    LockRiskJumpDialog
  },
  props: {
    config: {
      type: Object,
      default () {
        return {
          lockFlag: 0,
          compatibleRisk: 0,
          taskJump: 0,
          // 查看弹框中内容所需要的主要查询条件
          query: {
            // 任务id
            taskId: '',
            // 车辆id
            vehicleId: ''
          }
        }
      }
    }
  },
  data () {
    return {

    }
  },
  methods: {
    clickTag (key) {
      const dialogRef = this.$refs.lockRiskJumpDialogRef
      dialogRef.toggleVisible(true)
      dialogRef.switchTab(key)
    }
  }
}
</script>
<style lang="less" scoped>
.tagTag {
  height: 22px;
}
.lockTag {
    border-color: #58ABCE;
    color: #58ABCE;
    cursor: pointer;
}

.riskTag {
    border-color: #FF9900;
    color: #FF9900;
    cursor: pointer;
}

.jumpTag {
    border-color: #2BB080;
    color: #2BB080;
    cursor: pointer;
}
</style>
